import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { DNavBar, DModal, DLookImages } from '@/components'
import { AtButton } from 'taro-ui'
import './cardetail.scss'
import http from '@/api'
const itembg = require('../assets/people_right.png')
export default class cardetail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            item: {},
            src1: [],
            src2: [],
            src3: [],
            src4: [],
            isModal: false,
            carinfo: {
                itemStatus: false,
                itemUrl: ''
            }
        }
    }
    componentWillMount() {
        this.myCarDetail()
    }
    myCarDetail() {
        let { id } = this.$router.params
        let { src1, src2, src3, src4 } = this.state
        http.myCarDetail({ id: `${id}` }).then(res => {
            if (!res) {
                return
            }
            res.transCarInfoFileList.map(item => {
                if (item.cfFileType === '1') {
                    src1.push(item)
                }
                if (item.cfFileType === '2') {
                    src2.push(item)
                }
                if (item.cfFileType === '3') {
                    src3.push(item)
                }
            })
            src4 = res.transDriverFileList
            this.setState({
                item: res,
                src1,
                src2,
                src3,
                src4
            })
        })
    }
    delMyCar() {
        let { id } = this.$router.params
        http.delMyCar({ id: `${id}` }).then(res => {
        })
    }
    handleDelCar() {
        this.setState({
            isModal: true
        })

    }
    onDelateQuote() {
        this.delMyCar()
        Taro.navigateTo({
            url: `/pages/transportmgr/transportmgr`
        })
    }
    onCancelModal() {
        this.setState({
            isModal: false
        })
    }

    onLookHandle(url, i, arr = []) {
        if (window.bridge && arr.length > 0) {
            let _images = []
            arr.map(item => {
                _images.push(item.cfFileUrl)
            })
            window.bridge.callHandler('previewPhoto', { "index": i, "images": _images }, function responseCallback() { })
        } else {
            this.setState({
                carinfo: {
                    ...this.state.carinfo,
                    itemStatus: true,
                    itemUrl: url
                }
            })
        }
    }

    onLookItem() {
        this.setState({
            carinfo: {
                ...this.state.carinfo,
                itemStatus: false,
                itemUrl: ''
            }
        })
    }

    render() {
        const {
            item,
            src1,
            src2,
            src3,
            src4,
            isModal,
            carinfo
        } = this.state
        return (
            <View className='b_cardetail'>
                <DNavBar title='车辆详情'></DNavBar>
                <View className='b_cardetail__box'>
                    {/* <View className="b_cardetail__tips">
                  <Text>请耐心等待，平台管理员将会在3个工作日内审核您的申请</Text>
              </View> */}
                    <View className="b_cardetail__info">
                        <View className="item_title">
                            <Text className="item_title__left">车辆名称</Text>
                            <Text className="item_title__right">{item.ciName}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">车牌号码</Text>
                            <Text className="item_title__right">{item.ciNo}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">车辆年龄</Text>
                            <Text className="item_title__right">{item.ciAge}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">司机姓名</Text>
                            <Text className="item_title__right">{item.drName}</Text>
                        </View>
                    </View>
                </View>
                <View className='b_cardetail__images'>
                    <Text className='b_cardetail__images_title'>资料图片</Text>
                    <View className="b_cardetail__images_enterpris">
                        {src1.length !== 0 &&
                            <View className='b_cardetail__images_enterpris_item'>
                                <Text className='item_title'>车辆照片</Text>
                                {
                                    src1.map((item, i) => {
                                        return <Image src={item.cfFileUrl} key={i} className='item_image' onClick={this.onLookHandle.bind(this, item.cfFileUrl, i, src1)}></Image>
                                    })
                                }
                            </View>
                        }
                        {src2.length !== 0 &&
                            <View className="b_cardetail__images_enterpris_item">
                                <Text className="item_title">车辆行驶证</Text>
                                {
                                    src2.map((item, i) => {
                                        return <Image src={item.cfFileUrl} key={i} className='item_image' onClick={this.onLookHandle.bind(this, item.cfFileUrl, i, src2)}></Image>
                                    })
                                }
                            </View>
                        }
                        {src3.length !== 0 &&
                            <View className="b_cardetail__images_enterpris_item">
                                <Text className="item_title">车辆保险证明</Text>
                                {
                                    src3.map((item, i) => {
                                        return <Image src={item.cfFileUrl} key={i} className='item_image' onClick={this.onLookHandle.bind(this, item.cfFileUrl, i, src3)}></Image>
                                    })
                                }
                            </View>
                        }
                        {src4.length !== 0 &&
                            <View className="b_cardetail__images_enterpris_item">
                                <Text className="item_title">司机驾驶证</Text>
                                {
                                    src4.map((item, i) => {
                                        return <Image src={item.cfFileUrl} key={i} className='item_image' onClick={this.onLookHandle.bind(this, item.cfFileUrl, i, src4)}></Image>
                                    })
                                }
                            </View>
                        }
                    </View>
                </View>
                <View className='b_cardetail__footer'>
                    <AtButton className='item_btn item_btn__default' onClick={this.handleDelCar.bind(this)}>删除车辆</AtButton>
                </View>
                <DLookImages status={carinfo.itemStatus} url={carinfo.itemUrl} onLookHandle={this.onLookItem.bind(this)}></DLookImages>
                <DModal
                    isShow={isModal}
                    title='提示'
                    text='是否删除该运输车辆'
                    firstbtn='取消'
                    lastbtn='确认'
                    onFirst={this.onCancelModal.bind(this)}
                    onCancel={this.onCancelModal.bind(this)}
                    onLast={this.onDelateQuote.bind(this)}
                ></DModal>
            </View>
        )
    }
}
